import React, {PureComponent} from 'react'
import ReactRuler from './sketch-ruler';
import styles from './index.module.scss';
import ResizeBox from './ResizeBox';
import dvTool from "@/pages/dv/dvTool";
import {EE} from "@/utils";
import {debounce, cloneDeep} from 'lodash';
import EnumOnFire from "@/pages/dv/constants/EnumOnFire";
import drawTool from "@/pages/dv/drawTool";

interface IProps {
  width: number;
  height: number;
  scale: number;
  startX: number;
  startY: number;
  thick: number;
  handleCornerClick: () => void;
}

interface IState {
  lines: {
    h: number[],
    v: number[],
  };
  isShowRuler: boolean;
  isShowReferLine: boolean;

}

export default class Ruler extends PureComponent<IProps, IState> {
  public thick: number;
  public isDragChart: boolean;

  constructor(props: IProps) {
    super(props);
    this.state = {
      lines: {
        h: [0, dvTool.dvOption.width],
        v: [0,  dvTool.dvOption.height]
      },
      isShowRuler: true, // 显示标尺
      isShowReferLine: true // 显示参考线
    };
    this.isDragChart = false;
  }


  componentDidMount() {

  }

  /**
   * 划线
   * @param lines
   */
  handleLine = (lines: any) => {
    this.setState({lines})
  }

  // 显示/影藏标尺
  handleShowRuler = () => {
    const {isShowRuler} = this.state
    this.setState({isShowRuler: !isShowRuler})
  }
  // 显示/影藏参考线
  handleShowReferLine = () => {
    const {isShowReferLine} = this.state
    this.setState({isShowReferLine: !isShowReferLine})
  }

  /**
   * 左上角交汇处点击互动
   */
  handleCornerClick = () => {
    if(typeof this.props.handleCornerClick === 'function') this.props.handleCornerClick();
    this.setState({
      lines: {
        h: [0, dvTool.dvOption.width],
        v: [0,  dvTool.dvOption.height]
      }
    })
  }

  render() {
    const {lines, isShowRuler, isShowReferLine} = this.state;
    const {startY, startX, width, height, scale, thick} = this.props;
    const {h, v} = lines

    const rectWidth = dvTool.dvOption.width
    const rectHeight = dvTool.dvOption.height

    const shadow = {
      x: 0,
      y: 0,
      width: rectWidth,
      height: rectHeight
    }

    return (
      <div className={styles.wrapper}>
        <ResizeBox
          width={width}
          height={height}
          scale={scale}
        />

        {
          isShowRuler &&
          <ReactRuler
            lang={'zh-CN'}
            thick={thick}
            scale={scale}
            width={width - 18}
            height={height - 18}
            startX={startX}
            startY={startY}
            shadow={shadow}
            horLineArr={h}
            verLineArr={v}
            handleLine={this.handleLine}
            cornerActive={true}
            onCornerClick={this.handleCornerClick}
            // 右键菜单props
            isOpenMenuFeature={true}
            handleShowRuler={this.handleShowRuler}
            isShowReferLine={isShowReferLine}
            handleShowReferLine={this.handleShowReferLine}
          />
        }
      </div>
    )
  }
}
